<template>
  <div class="box">
    <div class="step">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="填写商品信息" />
        <el-step title="填写商品促销" />
        <el-step title="填写商品属性" />
        <el-step title="选择商品关联" />
      </el-steps>
    </div>
    <div v-show="active === 0">
      <el-form :model="form">
        <el-form-item label="商品分类:">
          <el-cascader
            v-model="value"
            :options="catoptions"
            @change="handleChange"
            :props="props"
          />
        </el-form-item>
        <el-form-item label="商品名称:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="副标题:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品品牌:">
          <el-select v-model="value" class="m-2">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品介绍:">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="商品货号:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品售价:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="市场价:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品库存:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="计量单位:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品重量:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="排序:">
          <el-input></el-input>
        </el-form-item>
      </el-form>
      <el-button style="margin-top: 12px" @click="next" type="primary"
        >下一步，填写商品促销</el-button
      >
    </div>
    <div class="pro-sale" v-show="active === 1">
      <el-form label-width="150px" ref="saleFormRef">
        <el-form-item label="赠送积分:" prop="keyword">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="赠送成长值:" prop="keyword">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="积分购买限制:" prop="keyword">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="预告商品:" prop="keyword">
          <el-switch></el-switch>
        </el-form-item>
        <el-form-item label="商品上架:" prop="keyword">
          <el-switch></el-switch>
        </el-form-item>
        <el-form-item label="商品推荐:" prop="keyword">
          <span>新品</span>
          <el-switch></el-switch>
          <span>推荐</span>
          <el-switch></el-switch>
        </el-form-item>
        <el-form-item label="服务保证:" prop="keyword">
          <el-checkbox-group>
            <el-checkbox label="无忧退货" name="type" />
            <el-checkbox label="快速退款" name="type" />
            <el-checkbox label="免费包邮" name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="详细页标题:" prop="keyword">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="详细页描述:" prop="keyword">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品关键字:" prop="keyword">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="商品备注:" prop="keyword">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="商品备注:" prop="keyword">
          <el-tabs
            v-model="activeName"
            type="card"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="无优惠" name="first"></el-tab-pane>
            <el-tab-pane label="特惠促销" name="second">
              <el-form-item label="开始时间：">
                <ElConfigProvider :locale="zhCn">
                  <el-date-picker type="datetime" placeholder="选择开始时间" />
                </ElConfigProvider>
              </el-form-item>
              <el-form-item label="结束时间：" class="middle">
                <ElConfigProvider :locale="zhCn">
                  <el-date-picker type="datetime" placeholder="选择结束时间" />
                </ElConfigProvider>
              </el-form-item>
              <el-form-item label="促销价格：" placeholder="请输入促销价格">
                <el-input
                  width="120"
                  :input-style="{ width: 196 + 'px' }"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="会员价格" name="third">
              <el-form-item label="黄金会员：">
                <el-input
                  width="120"
                  :input-style="{ width: 196 + 'px' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="白金会员：" class="middle">
                <el-input
                  width="120"
                  :input-style="{ width: 196 + 'px' }"
                ></el-input>
              </el-form-item>
              <el-form-item label="钻石会员：">
                <el-input
                  width="120"
                  :input-style="{ width: 196 + 'px' }"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="阶梯价格" name="fourth">
              <el-table border :data="[10, 20, 30]">
                <el-table-column label="数量">
                  <template #default>
                    <el-input></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="折扣">
                  <template #default>
                    <el-input></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default>
                    <el-button link type="primary">删除</el-button>
                    <el-button link type="primary">添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="满减价格" name="fived">
              <el-table border :data="[10, 20, 30]">
                <el-table-column label="满">
                  <template #default="scope">
                    <el-input></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="立减">
                  <template #default="scope">
                    <el-input></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button link type="primary">删除</el-button>
                    <el-button link type="primary">添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
      <el-button style="margin-top: 12px" @click="pre"
        >上一步，填写商品信息</el-button
      >
      <el-button style="margin-top: 12px" @click="next" type="primary"
        >下一步，填写商品属性</el-button
      >
    </div>
    <div class="pro-attrs" v-show="active === 2">
      <el-form label-width="150px" ref="attrFormRef">
        <el-form-item label="属性类型:" prop="productCategoryId">
          <el-select class="m-2" placeholder="请选择" size="large">
            <el-option
              v-for="item in proCategories"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品规格:" prop="keyword">
          <el-input disabled></el-input>
          <el-table :data="[10, 20]" style="width: 100%; margin: 20px 0" border>
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
          </el-table>
          <el-button type="primary">刷新列表</el-button>
          <el-button type="primary">同步价格</el-button>
          <el-button type="primary">同步库存</el-button>
        </el-form-item>
        <el-form-item label="商品规格:" prop="keyword">
          <el-input disabled></el-input>
        </el-form-item>
        <el-form-item label="商品相册:" prop="keyword">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon>
                      <zoom-in />
                    </el-icon>
                  </span>

                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="规格参数:" prop="keyword">
          <el-tabs
            v-model="activeName"
            type="card"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="电脑端详情" name="first">电脑端</el-tab-pane>
            <el-tab-pane label="移动端详情" name="second">Config</el-tab-pane>
          </el-tabs>
        </el-form-item>
      </el-form>
      <el-button style="margin-top: 12px" @click="pre"
        >上一步，填写商品促销</el-button
      >
      <el-button style="margin-top: 12px" @click="next" type="primary"
        >下一步，填写商品关联</el-button
      >
    </div>
    <div class="pro-relations" v-show="active === 3">
      <el-form label-width="150px" ref="relationFormRef">
        <el-form-item label="关联专题:" prop="keyword">
          <ElConfigProvider :locale="zhCn">
            <el-transfer
              v-model="value"
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入专题名称"
              :data="data"
              :titles="['待选择', '选择']"
            />
          </ElConfigProvider>
        </el-form-item>
        <el-form-item label="关联优选:" prop="keyword">
          <ElConfigProvider :locale="zhCn">
            <el-transfer
              v-model="value"
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入优选名称"
              :data="data"
              :titles="['待选择', '选择']"
            />
          </ElConfigProvider>
        </el-form-item>
      </el-form>
      <el-button style="margin-top: 12px" @click="pre"
        >上一步，填写商品关联</el-button
      >
      <el-button style="margin-top: 12px" @click="next" type="primary"
        >提交商品</el-button
      >
    </div>
  </div>
</template>
<script setup lang="ts">
import { user } from "@/api";
import { reactive, ref, toRefs } from "vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import type { TabsPaneContext, UploadFile } from "element-plus";

interface IState {
  form: ICreateBrandParams;
  options: IGoodBrand[];
  proCategories: IGoodsDataWithChildren[];
  listParams: user;
  active: number;
  catoptions: IGoodsDataWithChildren[];
}
interface Option {
  key: number;
  label: string;
  initial: string;
}
const activeName = ref("first");
const state = reactive<IState>({
  form: {
    bigPic: "",
    brandStory: "",
    factoryStatus: 0,
    firstLetter: "",
    logo: "",
    name: "",
    showStatus: 0,
    sort: 0,
  },
  proCategories: [],
  options: [],
  catoptions: [],
  listParams: {
    keyword: "",
    pageNum: 1,
    pageSize: 100,
  },
  active: 0,
});
const { form, options, listParams, active, catoptions, proCategories } =
  toRefs(state);
const disabled = ref(false);
const value = ref("");
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const props = {
  value: "id",
  label: "name",
  children: "children",
};
const generateData = () => {
  const data: Option[] = [];
  const states = [
    "California",
    "Illinois",
    "Maryland",
    "Texas",
    "Florida",
    "Colorado",
    "Connecticut ",
  ];
  const initials = ["CA", "IL", "MD", "TX", "FL", "CO", "CT"];
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index],
    });
  });
  return data;
};

const data = ref<Option[]>(generateData());
const handleChange = () => {};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const handleRemove = (file: UploadFile) => {
  console.log(file);
};
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
const filterMethod = (query: any, item: any) => {
  return item.initial.toLowerCase().includes(query.toLowerCase());
};
user.brandListApi(listParams.value).then((res) => {
  options.value = res.data.list;
});
user.categoryChildrenApi().then((res) => {
  catoptions.value = res.data;
});
const next = () => {
  if (active.value++ > 2) active.value = 0;
};
const pre = () => {
  if (active.value-- <= 0) active.value = 0;
};
</script>
<style lang="less" scoped>
.box {
  text-align: center;
  width: 800px;
  border: 1px solid #ccc;
  margin: 0 auto;
  margin-top: 50px;
  padding: 50px;
  .step {
    margin-bottom: 30px;
  }
}
:deep(.el-form-item__label) {
  width: 100px;
}
</style>
